<template>
  <div 
    class="article-list" 
  >
  <!-- 
    <van-pull-refresh 
      v-model="refreshing" 
      :success-text="refreshSuccessText"
      :success-duration="1500"
      @refresh="onRefresh"
    >
   -->
    <van-pull-refresh 
      v-model="refreshing" 
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-item
          v-for="(article, index) in articles"
          :key="index"
          :article ="article"
        >
        </article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListApi } from "@/api/article";
import ArticleItem from '@/components/article-item/article-item';
// import {debounce} from 'lodash'

export default {
  name: "ArticleList",
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      articles: [], //数据列表
      loading: false, //控制加载中的loading状态
      finished: false, //控制加载结束的状态，当加载结束，不再触发加载更多。
      timestamp: null,
      refreshing: false,  //下拉刷新状态
      refreshSuccessText: "",
      // scrollTop: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    async onLoad() {
      // 1. 获取数据
      const { data } = await getArticleListApi({
        channel_id: this.channel.id,
        // 时间戳 请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳，timestamp相当于页码，请求最新数据使用当前最新时间戳，下一页数据使用上一次返回的数据中的时间戳。
        // 获取当前最新的时间戳 +new Date 或者 Date.now()
        timestamp: this.timestamp || Date.now(),
        // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        with_top: 1,
      });
      console.log("输出文章列表", data);

      // 2.把数据放到list数组中
      const { results } = data.data;
      this.articles.push(...results);

      // 3. 加载状态结束 设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
      this.loading = false;
      this.refreshing = false;

      // 4. 数据全部加载完成
      if (results.length) {
        // 更新获取下一页数据的页码
        this.timestamp = data.data.pre_timestamp;
      } else {
        // 没有数据了，把加载状态设置结束，不再出发加载更多
        this.finished = true;
      }
    },
    async onRefresh () {
      // 清空列表数据
      // this.finished = false;

      // 重新加载数据
      // 将loading设置为true,表示处于加载状态
      // this.loading = true;

      // 下拉刷新，组件自己就会展示loading状态
      // 1.请求获取数据
      const { data } = await getArticleListApi({
        channel_id: this.channel.id,
        // 时间戳 请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳，timestamp相当于页码，请求最新数据使用当前最新时间戳，下一页数据使用上一次返回的数据中的时间戳。
        // 获取当前最新的时间戳 +new Date 或者 Date.now()
        timestamp: Date.now(),
        // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        with_top: 1,
      });
      console.log("刷新刷新文章列表", data);

      // 2.把数据放到数据列表中（往顶部追加）
      const {results} = data.data;
      this.articles.unshift(...results);

      // 3.关闭刷新状态
      this.refreshing = false;
      // 2.手动去让下拉刷新后，去执行list列表的load事件
      // this.$refs.listRef.check();

      // 4. 提示用户刷新成功
      const message = results.length
        ? `更新了${results.length}条数据`
        : '暂无数据更新';
      // this.$toast(message);
      // this.refreshSuccessText = message;
      this.$toast(message)
    },
    // handleScroll(event,index) {
    //   console.log('输出滚动事件',event,index);
      
    //   console.log('输出滚动',event.srcElement.scrollTop,event.srcElement.scrollHeight,event.srcElement.offsetHeight);
    // }
  },
  created() {},
  mounted() {
    // const articleList = this.$refs['article-list'];
    // const articleList = this.$refs['pull-refresh'];
    // console.log("mounted",articleList.scrollTop);

    // articleList.addEventListener('scroll', debounce(() => {
    //   console.log("onscroll",articleList.scrollTop);
    //   this.scrollTop = articleList.scrollTop
    // },50))
    // window.addEventListener('scroll',()=>{console.log(window.scrollY)})
    // const articleList = this.$refs['listRef'];
    // articleList.onscroll = debounce(() => {
    //   console.log("onscroll",articleList.scrollTop);
    //   this.scrollTop = articleList.scrollTop
    // },50)
  },
  activated() {
    // 从缓存中被激活
    // 把记录的到顶部的距离重新设置回去
    // const articleList = this.$refs['article-list'];
    // const articleList = this.$refs['pull-refresh'];
    // articleList.scrollTop = this.scrollTop;
  },
  deactivated() {
  }
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.article-list {
  min-height: 80vh;
  // overflow: scroll;
  // .van-pull-refresh {
  //   position: fixed;
  //   left: 0;
  //   right: 0;
  //   bottom: 50px;
  //   top: 90px;
  //   overflow-y: auto;
  // }
  
  // .van-list {
  //   position: fixed;
  //   left: 0;
  //   right: 0;
  //   bottom: 50px;
  //   top: 90px;
  //   overflow-y: auto;
  // }
}
</style>